<script setup lang="ts">
import type { FormDesignerComponents, FormItemPerm } from "../FormComponentMixin";
import { VueDraggable } from "vue-draggable-plus";
import FormComponent from "./FormComponent.vue";
import { computed, inject, onMounted } from "vue";
import { isDisplay } from "../FormItem";
import { type PropType } from "vue";

const props = defineProps({
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  },
  rules: {
    type: Object,
    default: () => {
      return {};
    }
  },
  parents: {
    type: Array,
    default: () => {
      return [];
    }
  },
  grid: {
    type: Object as PropType<FormDesignerComponents>,
    default: null
  },
  //本组件所在列表parents的索引位置
  index: {
    type: Number,
    default: 0
  }
});

const _value = defineModel<any>();
const _active = defineModel<FormDesignerComponents>("active");
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const emits = defineEmits(["change"]);

const freeMode = computed(() => props.mode === "free");
const showActive = computed(() => {
  console.log(_active.value, props.config);
  return _active.value?.id === props.config.id && props.mode === "free";
});

function onTargetComponentClick(cp) {
  console.log("active component", cp);
  _active.value = cp;
}

const handleItemValueChange = (item, val) => {
  emits("change", item, val);
};

onMounted(() => {
  console.log("grid col value", _value.value);
});
</script>

<template>
  <el-col
    :span="config.props.span"
    :offset="config.props.offset"
    :push="config.props.push"
    :pull="config.props.pull"
    @click="onTargetComponentClick(config)"
    :class="{
      'free-margin': freeMode,
      'w-form-d-item': freeMode,
      'w-f-cp-select': showActive
    }"
  >
    <vue-draggable
      v-model="config.props.columns"
      :animation="150"
      group="FormDesign"
      :disabled="!freeMode"
      :ghostClass="freeMode ? 'w-f-cp-select' : ''"
      :class="{ 'span-layout-container': freeMode }"
    >
      <template v-for="(item, idx) in config.props.columns" :key="item.id">
        <div v-if="isDisplay(perm, item.code)">
          <template v-if="grid && grid.props.isSubform && grid.props.isSubform === true">
            <el-form-item
              v-if="item.props.isFormItem"
              :label="item.name"
              :required="item.props.required"
              :prop="'[' + grid.code + '].' + item.code"
              @click.stop="_active = item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode,
                'w-form-cp-nlb': item.props.hideLabel
              }"
            >
              <template v-if="_value && Object.prototype.hasOwnProperty.call(_value, item.code)">
                <FormComponent
                  :index="idx"
                  :parents="item"
                  :config="item"
                  :mode="mode"
                  v-model="_value[item.code]"
                  v-model:active="_active"
                  :type="item.type"
                  @change="handleItemValueChange"
                />
              </template>
              <template v-else>
                <FormComponent
                  :index="idx"
                  :parents="item"
                  :config="item"
                  :mode="mode"
                  v-model="_value"
                  v-model:active="_active"
                  :type="item.type"
                  @change="handleItemValueChange"
                />
              </template>
            </el-form-item>
            <FormComponent
              v-else-if="item.props.isSubform"
              :config="item"
              v-model="_value[item.code]"
              v-model:active="_active"
              :mode="mode"
              :type="item.type"
              :rules="props.rules"
              @click.stop="_active = item"
              :index="idx"
              :parents="item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode
              }"
            />
            <FormComponent
              v-else
              :config="item"
              v-model="_value"
              v-model:active="_active"
              :mode="mode"
              :type="item.type"
              :rules="props.rules"
              @click.stop="_active = item"
              :index="idx"
              :parents="item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode
              }"
            />
          </template>
          <template v-else>
            <el-form-item
              v-if="item.props.isFormItem"
              :label="item.name"
              :required="item.props.required"
              :prop="item.code"
              @click.stop="_active = item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode,
                'w-form-cp-nlb': item.props.hideLabel
              }"
            >
              <FormComponent
                :index="idx"
                :parents="item"
                :config="item"
                :mode="mode"
                v-model:active="_active"
                :type="item.type"
                @change="handleItemValueChange"
              />
            </el-form-item>
            <FormComponent
              v-else-if="item.props.isSubform"
              :config="item"
              v-model="_value[item.code]"
              v-model:active="_active"
              :mode="mode"
              :type="item.type"
              :rules="props.rules"
              @click.stop="_active = item"
              :index="idx"
              :parents="item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode
              }"
            />
            <FormComponent
              v-else
              :config="item"
              v-model="_value"
              v-model:active="_active"
              :mode="mode"
              :type="item.type"
              :rules="props.rules"
              @click.stop="_active = item"
              :index="idx"
              :parents="item"
              :class="{
                'w-form-d-item': freeMode,
                'w-form-cp-active': _active?.id === item.id && freeMode
              }"
            />
          </template>
        </div>
      </template>
    </vue-draggable>
  </el-col>
</template>

<style lang="scss" scoped>
:deep(.span-layout-container) {
  width: 100%;
  min-height: 50px;
  background-color: $main-bgc;
}

.free-margin {
  margin: 5px 0px;
}

.w-f-cp-select {
  border: 1px dashed var(--el-color-primary) !important;
  border-radius: 2px;
}
</style>
